<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no, minimal-ui">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <title>一问奕答</title>
    <link rel="stylesheet" href="../css/framework7.ios.min.css">
    <link rel="stylesheet" href="../css/framework7.ios.colors.min.css">
    <link rel="stylesheet" href="../css/framework7-icons.css">
    <link rel="stylesheet" href="css/multiaudio.min.css">
    <style>.navbar{display: none;}.flex-column{display: -webkit-box;display: -ms-flexbox;display: -webkit-flex;display: flex;flex-direction: column;-ms-flex-direction: column;-webkit-flex-direction: column;}</style>
</head>
<body>
<div class="panel-overlay"></div>
<div class="panel panel-right panel-reveal"></div>
<div class="statusbar-overlay"></div>
<div class="views">
    <div class="view view-main">
        <div class="navbar">
            <div class="navbar-inner"></div>
        </div>
        <div class="pages no-navbar">
            <div id="Audio" class="page" data-id="0" data-src="">
                <div class="page-content">
                    <div class="audiobg" style="background-image: url(img/audiobg.jpg);"></div>
                    <div class="audiocontent">
                        <div style="width: 100%;margin-top: 10vh;text-align: center;">
                            <img src="img/audiobg.jpg" class="audiocover" data-rotate="0">
                        </div>
                        <div style="width: 100%">
                            <div class="audiotitle color-black size-18"></div>
                        </div>
                        <div style="position: absolute;bottom: 5vh;left: 0;width: 100%;">
                            <div class="curtime">00:00</div>
                            <div class="slidebar">
                                <div class="gap"></div>
                                <div data-pos="0" class="probar">
                                    <div class="slide-btn flex-row flex-justify-center flex-align-center">
                                        <span class="preloader color-white" style="width: 80%;"></span>
                                    </div>
                                </div>
                            </div>
                            <div class="totaltime">00:00</div>
                        </div>
                    </div>
                    <div class="flex-row flex-justify-center flex-align-center"
                         style="width: 100vw;height: 20vh;position: absolute;top: 80vh;left: 0;">
                        <div class="audio-info-btn flex-column" style="width: 25vw;text-align: center;">
                            <i class="f7-icons color-gray" style="font-size: 4vh;">folder</i>
                            <span style="font-size: 12px;color: #8e8e93;">笔记</span>
                        </div>
                        <div class="skip-prev-btn" style="width: 10vw;text-align: center;">
                            <i class="f7-icons color-gray" style="font-size: 5vh;">chevron_left</i>
                        </div>
                        <div class="play-btn" style="width: 30vw;text-align: center;">
                            <i class="f7-icons color-gray" style="font-size: 8vh;">play_round</i>
                        </div>
                        <div class="skip-next-btn" style="width: 10vw;text-align: center;">
                            <i class="f7-icons color-gray" style="font-size: 5vh;">chevron_right</i>
                        </div>
                        <div class="audio-list-btn flex-column" style="width: 25vw;text-align: center;">
                            <i class="f7-icons color-gray" style="font-size: 3vh;">list</i>
                            <span style="font-size: 12px;color: #8e8e93;margin-top: 3px;">播放列表</span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<script id="Panel" type="text/template">
    <div class="content-block">
        <p style="font-size: 17px;">播放列表</p>
        {{#each this}}
        <p><a href="#" data-index={{@index}} class="skipitem {{#if @first}}active{{/if}}" style="font-size: 15px;">{{this}}</a></p>
        {{/each}}
    </div>
</script>
<script id="Note" type="text/template">
    {{#each this}}
    {{#if @first}}
    <img src="{{this}}" style="width: 100%;">
    {{else}}
    <img class="lazy" data-src="{{this}}" style="width: 100%;">
    {{/if}}
    {{/each}}
</script>
<script type="text/javascript" src="../js/framework7.min.js"></script>
<script type="text/javascript" src="../js/wx.jssdk.min.1.2.0.js"></script>
<script type="text/javascript" src="../js/howler.min.js"></script>
<script type="text/javascript" src="js/multiaudio.min.js"></script>
</body>
</html>